<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted} from "vue";

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTI3OGI2Ni05YmJhLTRlMTYtYjdiNC1hM2E5ZjI1MGYxZmIiLCJpZCI6MTQ0NTcxLCJpYXQiOjE3MDMxNTQ2MzZ9.-ab5sCTIXoyCUMMGv35NQBbR0h7pxsxu78D3AfCVTek'
  const customImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
  })
  const mapboxImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  })
  var url = 'http://localhost:8081/geoserver/nurc/wms'; //Geoserver URL
  // Cesium之Viewer初始常用配置
  const viewer = new Cesium.Viewer('cesiumContainer', {
    shadows: false, // 阴影
    animation: false, // 左下角控制动画
    baseLayerPicker: false, // 右上角图层选择器
    fullscreenButton: false, // 全屏
    geocoder: false, // 右上角搜素
    homeButton: false, // 主页
    infoBox: false, // 信息框
    scene3DOnly: true, // 仅仅显示3D，可以隐藏右上角2D和3D按钮
    selectionIndicator: false, // 绿色选择框
    timeline: false, // 最下面时间轴
    navigationHelpButton: true, // 右上角帮助按钮
    navigationInstructionsInitiallyVisible: true, // 导航指令
    useDefaultRenderLoop: true,
    showRenderLoopErrors: true,
    projectionPicker: false, // 投影选择器
    // terrainProvider: Cesium.createWorldTerrainAsync(), // 地形
    // imageryProvider:  wmsImageryProvider // 影像图
  });
  viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
  // 取消双击时间
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
  viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium icon
  // document.querySelector('.cesium-infoBox-camera').style.display = 'none';//隐藏infobox camera
  // 加载离线地图服务 - web服务影像提供器来实例化影像图层
  const imageryLayers = viewer.imageryLayers;
  const scene = viewer.scene;
  const provider = new Cesium.WebMapServiceImageryProvider({
    url: "http://localhost:8086/geoserver/ne/wms",
    layers: "ne:world",
    parameters: {
      format: "image/png",
      transparent: true,
      srs: "EPSG:4326"
    },
  });
  imageryLayers.addImageryProvider(provider);
  // 获取屏幕坐标（Cartesain2）表示
  // const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  // handler.setInputAction((e) => {
  //   console.log('屏幕坐标： ', e.position)
  // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

  // 屏幕坐标转世界坐标
  // 单击位置movement.position是屏幕坐标，需要将屏幕坐标转换为世界坐标
  const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction((movement) => {
    // 从Cartesain2屏幕坐标获取Cartesain3世界坐标
    // 根据单击的位置所拾取的要素类型不同
    // 单击的位置要在球体否则转换为undefined
    // 第一种方式： 获取场景坐标
    let cartesian3Position01 = scene.pickPosition(movement.position)
    console.log('cartesian3Position01::: ', cartesian3Position01)
    // 第二种方式： 获取地表坐标
    let ray = viewer.camera.getPickRay(movement.position);
    // ray: 测试相交的射线，scene：当前场景
    let cartesian3Position02 = viewer.scene.globe.pick(ray, viewer.scene);
    console.log('cartesian3Position02::: ', cartesian3Position02)
    // 第三种方式： 获取椭球面坐标
    // 椭球面坐标参考椭球体的WGS-84体系，不包含地形、模型、倾斜摄影模型表面
    let cartesian3Position03 = viewer.scene.camera.pickEllipsoid(movement.position);
    console.log('cartesian3Position03::: ', cartesian3Position03)
    // 从Cartesian3世界坐标获取WGS-84坐标(弧度表示）
    let  cartographic = Cesium.Cartographic.fromCartesian(cartesian3Position01);
    console.log('WGS-84 position: ', cartographic);
    // {
    //   "longitude": -1.9644396422943724,
    //     "latitude": 0.7562774920515126,
    //     "height": -265.2578173681123
    // }
    // 从WGS-84坐标获取经纬度坐标(弧度 转为 经纬度
    let lat = Cesium.Math.toDegrees(cartographic.latitude);
    let lng = Cesium.Math.toDegrees(cartographic.longitude);
    let height = Cesium.Math.toDegrees(cartographic.height);
    console.log('{lat, lng, height}::: ', {lat, lng, height})
    // 经纬度坐标转为WGS-84弧度坐标
    let cartographicPosition = Cesium.Cartographic.fromDegrees(lng, lat, height)
    console.log('cartographicPosition:: ', cartographicPosition)
    // =========== 经纬度坐标转为世界坐标Cartesian3
    let cartesian3PositionFromDegrees = Cesium.Cartesian3.fromDegrees(lng, lat, height);
    // =========== WGS84弧度坐标转为世界坐标Cartesian3
    let cartesian3PositionFromWGS84 = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
    console.log('cartesian3PositionFromDegrees::: ', cartesian3PositionFromDegrees)
    console.log('cartesian3PositionFromWGS84::: ', cartesian3PositionFromWGS84)
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
})
</script>

<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
